<script setup>
// #region 引入包, 函数和组件
import { ref } from "vue";
import Switch from "@/components/switch.vue"; // 撤换页面管理页面
import { useRouter } from "vue-router";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const router = useRouter()
// #endregion

// #region // 变量
const tabsName = ref({
  form: "资金组成",
  flowTo: "资金流向",
  source: "资金来源",
  user: "用户管理",
});
// #endregion

// #region // 函数
const logout = () => {
  router.replace({ path: '/login' })
  localStorage.removeItem('token')
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <div class="home">
    <div class="tabs">
      <router-link to="capital">
        <i
          ><svg
            t="1749388756416"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11376"
            width="200"
            height="200"
          >
            <path
              d="M444.8 271.36v319.36l158.72 158.72 54.4-53.76-135.68-135.68V271.36H444.8z"
              fill="#9CA2AE"
              p-id="11377"
            ></path>
            <path
              d="M579.84 67.84A442.24 442.24 0 0 0 145.28 428.8H8.96l163.2 163.2L335.36 428.8H218.88a372.48 372.48 0 1 1 29.44 249.6l-64 33.92A444.16 444.16 0 1 0 579.84 67.84z"
              fill="#9CA2AE"
              p-id="11378"
            ></path></svg
        ></i>
        资金管理
      </router-link>
      <router-link to="system">
        <i
          ><svg
            t="1749388797502"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="12469"
            width="200"
            height="200"
          >
            <path
              d="M512 858.538667l384-54.016V165.504L525.994667 218.453333a97.706667 97.706667 0 0 1-27.989334 0L127.957333 165.504v639.018667L512 858.538667zM136.96 101.546667l370.048 52.992a25.514667 25.514667 0 0 0 10.026667 0L887.04 101.546667c19.328-2.005333 36.181333 3.328 50.517333 16 14.336 12.672 21.802667 28.672 22.485334 48v638.976c0 16-5.162667 29.866667-15.488 41.514666-10.325333 11.690667-23.466667 18.858667-39.509334 21.504l-387.968 55.04a25.386667 25.386667 0 0 1-10.026666 0l-388.010667-55.04a65.408 65.408 0 0 1-39.466667-21.504 60.586667 60.586667 0 0 1-15.488-41.514666V165.546667a64.426667 64.426667 0 0 1 22.485334-48c14.336-12.672 31.146667-18.005333 50.474666-16h-0.042666z m343.04 85.973333h64v704h-64v-704z"
              fill="#000000"
              fill-opacity=".65"
              p-id="12470"
            ></path></svg
        ></i>
        系统管理
      </router-link>
    </div>

    <div class="Head_Con">
      <header>
        <div class="tabs_children_name">{{ tabsName[$route.name] }}</div>
        <div class="Info">
          <div class="user">
            <span>admin</span> | <em @click="logout">退出</em>
          </div>
          <Switch :tabsName></Switch>
        </div>
      </header>

      <div class="con">
        <div class="tabs_children"></div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
}

.tabs {
  background: #001236;
  width: 100px;
  padding-top: 120px;
  font-size: 16px;
  a {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #717580;
    height: 100px;
    justify-content: center;
    border-left: 2px solid transparent;
  }
  path {
    fill: #717580;
  }
  svg {
    width: 24px;
    height: 24px;
  }
  .router-link-active {
    color: #f0eae7;
    background: #031d49;
    border-left-color: #fff;
    path {
      fill: #f0eae7;
    }
  }
}

.Head_Con {
  flex: 1;
  display: flex;
  flex-direction: column;
}

header {
  height: 120px;
  display: flex;
  .tabs_children_name {
    height: 120px;
    border-bottom: 1px solid #203a66;
    background: #031d49;
    text-align: center;
    line-height: 119px;
    font-size: 18px;
    width: 150px;
    color: #eee;
  }
  .Info {
    flex: 1;
    display: flex;
    flex-direction: column;
    .user {
      height: 80px;
      text-align: right;
      line-height: 79px;
      border-bottom: 1px solid #eeeeee;
      padding-right: 20px;
      em {
        color: #666;
        cursor: pointer;
      }
    }
  }
}

.con {
  flex: 1;
  background: #f0f2f6;
  position: relative;
  .tabs_children {
    position: absolute;
    width: 150px;
    height: 100%;
    background: #031d49;
    color: #fff;
    z-index: 1;
  }
}
</style>
